<template>
	<view v-if="showFlag" class="fname">
		<view v-for="item in data" @click="change(item.fid)">{{item.fname}}</view>
	</view>
	<view v-else class="gjp">
		
	</view>
</template>

<script setup>
	import {ref,watch,defineProps,defineEmits} from "vue"
	const props = defineProps({
		data:{
			type:String,
			default:[]
		}
	})
	const showFlag =ref(false)
	watch(()=>props.data.length,()=>{
		console.log(props.data.length)
		if(props.data.length>0){
			showFlag.value=true
		}else{
			showFlag.value=false
		}
		
	},{
		immediate:true
	})
	const emit = defineEmits(["change"])
	function change(id){
		emit("change",id)
	}
</script>

<style scoped>
	.gjp{
		background-color: aqua;
		height: 50rpx;
	}
	.fname{
		display: flex;
		gap:20rpx
	}
</style>